<template>
	<view class="container">
		<view class="nav-box bfw" :style="'padding-top:' + statusBarHeight + 'px'">
			<view class="nav-title df" :style="'height:' + titleBarHeight + 'px'">
				<view>消息</view>
				<view class="nav-del df" @click="readAllMessage">
					<image src="/static/img/qc.png"></image>
				</view>
			</view>
			<view class="nav-bar df">
				<view
					v-for="(item,i) in navarr"
					:key="i"
					:class="['bar-item', 'df', (i == navidx && 'active')]"
					@click="navClick"
					:data-i="i"
				>
					<text>{{item.name}}</text>
					<view v-if="item.count > 0" class="msg">{{item.count}}</view>
				</view>
			</view>
		</view>
		<view class="content-box" :style="'margin-top:calc(' + (statusBarHeight + titleBarHeight) + 'px + 100rpx)'">
			<view class="heio df" :style="'height:' + (isFun || 'loading' == loadStatus ? '0px' : '60rpx')">
				<uni-load-more showText="false" status="loading"></uni-load-more>
			</view>
			<view v-if="isEmpty" class="empty-box df">
				<image src="/static/img/inset/null.png" />
				<view class="e1">暂无相关通知</view>
				<view class="e2">在信息爆炸的时代，这里格外宁静</view>
			</view>
			<block v-else>
				<view v-for="(item,i) in list" :key="i" class="msg-box">
					<view class="msg-left" @click="toNavigate(item.avatar_url, item.id, i)">
						<image v-if="item.launch_id && item.user" class="avatar" :src="item.user.avatar" mode="aspectFill"></image>
						<image v-else class="icon" :src="3 == item.type ? '/static/img/tabbar/2.png' : '/static/img/tabbar/4.png'"></image>
						<view v-if="0 == item.read" class="microlabel" style="bottom:0;right:0"></view>
					</view>
					<view class="msg-item">
						<view class="item-title">
							<text v-if="item.launch_id && item.use">{{item.user.name}}</text>
							{{item.title}}
						</view>
						<view class="item-icon" @click="moreClick" :data-i="i">
							<image src="/static/img/gd.png"></image>
						</view>
						<view class="item-content" @click="toNavigate(item.content_url, item.id, i)">
							<rich-text :nodes="item.content"></rich-text>
						</view>
						<view class="item-time">{{item.create_time_str}}</view>
					</view>
				</view>
			</block>
			<uni-load-more :showText="false" :status="loadStatus"></uni-load-more>
		</view>
		<uni-popup ref="morePopup" type="bottom">
			<view class="more-popup" catchtouchmove="true">
				<view class="more-item df" @click="readMessage">
					<text>已读</text>
					<image src="/static/img/yd.png"></image>
				</view>
				<view class="more-item df" @click="delNotice">
					<text style="color:#FA5150">删除</text>
					<image src="/static/img/sc.png"></image>
				</view>
				<view class="more-item" @click="closeMoreClick">
					<text style="color:#999">取消</text>
				</view>
			</view>
		</uni-popup>
		<!-- Tips Box -->
		<uni-popup ref="tipsPopup" type="top" mask-background-color="rgba(0, 0, 0, 0)">
			<view class="tips-box df" :style="{marginTop: statusBarHeight+44+'px'}">
				<view class="tips-item">{{tips_title}}</view>
			</view>
		</uni-popup>
		<tabbar currentPage="3" :currentMsg="currentMsg" :userAvatar="userAvatar"></tabbar>
	</view>
</template>

<script>
	const app = getApp();
	const api = require('@/config/api');
	const util = require('@/utils/util');
	export default {
		components: {},
		data() {
			return {
				idx: 0,
				statusBarHeight: app.globalData.statusBarHeight,
				titleBarHeight: app.globalData.titleBarHeight,
				currentMsg: 0,
				insetUrl: api.insetUrl,
				navarr: [
					{ name: "全部", count: 0 },
					{ name: "笔记", count: 0 },
					{ name: "圈子", count: 0 },
					// { name: "购物", count: 0 },
				],
				navidx: 0,
				list: [],
				page: 1,
				isEmpty: false,
				isFun: true,
				loadStatus: 'more',
				isUser: true,
			}
		},
		onPullDownRefresh() {

			if (!this.isUser) return;
			this.list = [];
			this.page = 1;
			this.getMessageCount();
			this.getMessage();
			uni.stopPullDownRefresh();
		},
		async onLoad(option) {
			util.showShareMenu();
			await this.$onLaunched;
			this.userRefreshInfo();
		},
		onShow() {
			this.list = [];
			this.page = 1;
			let userInfo = uni.getStorageSync('user_info');
			if (userInfo == '' || userInfo == null || typeof(userInfo) == "undefined") {
				this.isUser = false;
			}else{
				this.isUser = true;
			}
			if (!this.isUser) return;
			
			this.getMessageCount();
			this.getMessage();
		},
		// onHide() {
		// 	if (!this.isUser) return;
		// 	util.request(api.readMessageUrl, {
		// 		type: this.navidx
		// 	}, "POST");
		// },
		methods: {
			readMessage() {
				let that = this;
				uni.showLoading({ mask: !0 });
				util.request(api.readMessageUrl, { id: that.list[that.idx].id }, "POST").then(function (res) {
					uni.hideLoading();
					that.list[that.idx].read = 1;
					if(0 != that.list[that.idx].type){
						that.barList[that.list[that.idx].type].count--
					}
					that.$refs.morePopup.close(),
					that.currentMsg--;
				});
			},
			readAllMessage() {
				let that = this;
				if (0 == that.currentMsg) return that.opTipsPopup("暂无未读消息！");
				util.request(api.readMessageUrl, { id: 0 }, "POST").then(function (res) {
					that.barList[1].count = 0;
					that.barList[2].count = 0;
					that.barList[3].count = 0;
					for (let i in that.list){
						that.list[i].read = 1;
					} 
					that.currentMsg = 0;
					that.opTipsPopup("已将所有消息标记为已读！");
				});
			},
			userRefreshInfo() {
				let that = this;
				util.request(api.userRefreshInfoUrl).then(function(res) {
					that.user_info = res.data.info;
					uni.setStorageSync('user_info', res.data.info);
					uni.setStorageSync('user_token', res.data.token);
					if (res.data.info.status == 0) {
						uni.reLaunch({
							url: '/pages/setting/err'
						});
					}
				});
			},
			getMessageCount() {
				let that = this;
				util.request(api.getMessageCountUrl, {}).then(function(res) {
					that.navarr[0].count = res.data[0];
					that.navarr[1].count = res.data[1];
					that.navarr[2].count = res.data[2];
				});
			},
			getMessage() {
				let that = this;
				that.loadStatus = 'loading';
				that.isEmpty = false;
				util.request(api.getMessageUrl, {
					type: that.navidx,
					page: that.page
				}).then(function(res) {
					that.isFun = true;
					if (res.data && res.data.data.length) {
						that.list = that.list.concat(res.data.data);
						that.page = res.data.current_page;
						that.loadStatus = 'more';
					} else if (that.page == 1) {
						that.isEmpty = true;
						that.loadStatus = 'more';
					} else {
						that.loadStatus = 'no-more';
					}
				});
			},
			navClick(e) {
				if (this.isFun) {
					this.navidx = e.currentTarget.dataset.i;
					this.isFun = false;
					this.list = [];
					this.page = 1;
					this.getMessage();
				}
			},
			toNavigate(url,id,idx) {
				// let url = e.currentTarget.dataset.url;
				// let id = e.currentTarget.dataset.id;
				// let idx = e.currentTarget.dataset.idx;
				if (this.list[idx].read == 0) {
					this.list[idx].read = 1;
					this.navarr[this.navidx].count--;
				}
				util.request(api.readMessageUrl, {
					id: id,
					//type: this.navidx
				}, "POST");
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			delNotice() {
				let that = this;
				uni.showModal({
					content: "确认要永久删除这条消息吗？",
					confirmColor: "#FA5150",
					success: function (res) {
						if(res.confirm){
							uni.showLoading({ mask: !0 });
							util.request(api.delMessageUrl, { id: that.list[that.idx].id }, "POST").then(function (e) {
								uni.hideLoading();
								if(0 == that.list[that.idx].read && 0 != that.list[that.idx].type){
									that.barList[that.list[that.idx].type].count--;
								}
								that.list.splice(that.idx, 1);
								if(that.list.length <= 0){
									that.isEmpty = !0;
									that.loadStatus = "more";
								}
								that.opTipsPopup(e.msg),
								that.$refs.morePopup.close(),
								that.currentMsg--;
							})
						}
					},
				});
			},
			closeMoreClick() {
				this.$refs.morePopup.close();
			},
			moreClick(t) {
				this.idx = t.currentTarget.dataset.i;
				this.$refs.morePopup.open();
			},
		},
		onReachBottom() {
			if (!this.isUser) return;
			this.page = this.page + 1;
			this.getMessage();
		},
	}
</script>
<style lang="scss">
	@import url("/static/css/tabbar/message.css");
</style>